<template>
  <div class="layout">
    <Layout>
      <Sider hide-trigger class="sideBar">
        <!-- 添加删除操作放最上面 -->
        <!-- <div :style="this.tmpStyle" v-if="this.list">
          <div class="menu-item" @click="orgAdd">
            <a-tooltip placement="bottom" title="新增子组织">
              <a-icon type="plus-circle-o" />
            </a-tooltip>
          </div>
          <div class="menu-item" @click="orgEdit">
            <a-tooltip placement="bottom" title="修改">
              <a-icon type="edit" />
            </a-tooltip>
          </div>
          <div
            class="menu-item"
            @click="orgDelete"
            v-if="this.list.parentOrgId"
          >
            <a-tooltip placement="bottom" title="删除">
              <a-icon type="minus-circle-o" />
            </a-tooltip>
          </div>
        </div> -->
        <a-directory-tree
          multiple
          default-expand-all
          @select="onSelect"
          @expand="onExpand"
          @rightClick="onRightClick"
        >
          <!-- 如果把key用v-for来绑定，data从json中读取，按顺序来读取就不需要文件名一一对应了！ -->
          <!-- title可以定义两个count，每个父级的自己点使用的时候有自己对应的count，写一个方法动态的添加数据就可以了 -->
          <a-tree-node
            v-for="item in list"
            :title="item.title"
            :key="item.id"
            :label="item.path"
          >
            <a-tree-node
              v-for="item in item.children"
              :key="item.id"
              :title="item.title"
              :label="item.path"
              is-leaf
            />
            <!-- <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf /> -->
          </a-tree-node>
          <!-- <a-tree-node key="0-0" title="parent 0">
            <a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />
            <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-1" title="parent 1">
            <a-tree-node key="0-1-0" title="leaf 1-0" is-leaf />
            <a-tree-node key="0-1-1" title="leaf 1-1" is-leaf />
          </a-tree-node> -->
        </a-directory-tree>
      </Sider>
      <Layout>
        <Header class="header1">
          <Breadcrumb>
            <BreadcrumbItem>root</BreadcrumbItem>
            <!-- 从children数组的title中获取数据 -->
            <!-- this.$store.state.listTree.children.title -->
            <BreadcrumbItem>{{ aTitle }}</BreadcrumbItem>
            <!-- 从children数组的children数组的title中获取数据 -->
            <!-- this.$store.state.listTree.children.children.title -->
            <BreadcrumbItem>{{ subTitle }}</BreadcrumbItem>
          </Breadcrumb>
        </Header>
        <Content class="content1">{{ defaultContent }}</Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {}
  },
  created() {
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(
      ['subTitle', 'aTitle', 'inputVal', 'defaultContent', 'listTree', 'list']
      // {
      //   subTitle: state => state.subTitle,
      //   aTitle: state => state.aTitle,
      //   inputVal: state => state.inputVal,
      //   defaultContent: state => state.defaultContent
      // }
    )
  },
  methods: {
    handleAdd() {
      // this.$store.state.count++
      // 不推荐, 不利于维护
      this.$store.commit('addLi')
      // console.log(this.$store.state.listTree)
    },
    // 树状数组的右键点击事件
    onRightClick({ event, node }) {
      const x = event.currentTarget.offsetLeft + event.currentTarget.clientWidth
      const y = event.currentTarget.offsetTop
      this.NodeTreeItem = {
        pageX: x,
        pageY: y,
        id: node._props.eventKey,
        title: node._props.title,
        parentOrgId: node._props.dataRef.parentOrgId || null
      }
      this.tmpStyle = {
        position: 'absolute',
        maxHeight: 40,
        textAlign: 'center',
        left: `${x + 10 - 0}px`,
        top: `${y + 6 - 0}px`,
        display: 'flex',
        flexDirection: 'row'
      }
    },
    // 用于点击空白处隐藏增删改菜单
    clearMenu() {
      this.NodeTreeItem = null
    },
    handleChildAdd(titles) {
      this.$store.commit('addChildLi', titles)
      // console.log(this.$store.state.listTree.children)
      console.log(titles)
    },
    // // 展示内容区域
    // showContent() {
    //   this.$store.commit('showContent')
    // },
    // 判断是否是二级目录, 和点击同步进行, 需要把input的val渲染出来然后和面包屑绑定
    secondTitle() {
      if (this.$store.state.listTree.children != []) {
        this.aTitle = this.$store.state.listTree.children.title
      }
    },
    // 判断是否有第三级目录, 可以和点击同步进行, 需要把input的val渲染出来然后和面包屑绑定
    thirdTitle() {
      if (
        this.$store.state.listTree.children != [] &&
        this.$store.state.listTree.children.children != []
      ) {
        this.subTitle = this.$store.state.listTree.children.children.title
      }
    },
    // 点击input按钮
    inputEnter() {
      // 隐藏input输入框
      // 将输入的名字作为文件名
      // 显示本来隐藏的文件名
    },
    // 获取input的输入的值
    updateValue() {
      // input
    },
    onSelect(keys, event) {
      this.$store.commit('showContent', keys)
      this.$store.commit('showCrumb', event.node.title)
      console.log('Trigger Select', keys, event, event.node.title)
    },
    onExpand() {
      console.log('Trigger Expand')
    }
  }
}
</script>
<style scoped>
/* 更改header的样式 */
.ivu-layout-header {
  background: #fff;
  /* height: 15px; */
}
/* header里面的内容 */

/* color: #fff; */
/* height: 15px; */

/* 面包屑导航 前几个*/
.ivu-breadcrumb {
  color: #333;
  text-align: left;
}
/* 面包屑导航最后一个 */
.ivu-breadcrumb > span:last-child {
  color: #222;
}

/* 更改content的样式 */
.ivu-layout-content {
  background: #fff;
  /* text-align: left; */
}

/* content里面的内容 */
.content1 {
  color: #333;
}

/* 树形控件的箭头 */
.demo-tree-render {
  /* background: #fff; */
  color: #fff;
}
.demo-tree-render .ivu-tree-title {
  width: 100%;
}
/* 树形结构的标签 */
/* .ivu-tree-children {
  color: #fff;
} */

.ivu-tree ul li {
  color: #333;
}
.ivu-layout-sider-children {
  width: 350px !important;
}

/* 全部侧边栏 */
.ivu-layout-sider {
  background: #fff;
}

/* input输入框在最上面 */
input {
  z-index: 999;
}
</style>
